<template>
  <div class="home" ref="containerRef"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

export default defineComponent({
  setup(props) {
    const containerRef = ref();
    let scene = new THREE.Scene();
    const draw = async () => {
      //   //绘制曲线
    //   let curve = new THREE.CatmullRomCurve3(
    //     [
    //       new THREE.Vector3(-80, -40, 0),
    //       new THREE.Vector3(-70, 40, 0),
    //       new THREE.Vector3(70, 40, 0),
    //       new THREE.Vector3(80, -40, 0),
    //     ],
    //     false
    //   );
    //   // let points = curve.getSpacedPoints(200);
    //   let geometry = new THREE.TubeGeometry(curve, 100,0.6,50, false);
    // //   geometry.setFromPoints(points);
    //   let material = new THREE.MeshPhongMaterial({
    //     color: 0x000000,
    //   });
    //   let tube = new THREE.Mesh(geometry, material);
    //   scene.add(tube);
    //   let i = 0;
    //   //加载汽车
    //   let fbxLoader = new FBXLoader(),
    //     textureLoader = new THREE.TextureLoader();
    //   let carModel = await fbxLoader.loadAsync("/models/car/car.fbx"),
    //     picture = await textureLoader.loadAsync("/models/car/0.jpeg"),
    //     bumpPic = await textureLoader.loadAsync("/models/car/1.png");
    //   carModel.scale.set(0.3, 0.3, 0.3);
    //   carModel.position.set(-80, -40, 0);
    // //   carModel.lookAt(points[i + 1].x, points[i + 1].y, points[i + 1].z);
    // //   carModel.rotateY(-Math.PI / 2);
    // //   carModel.rotateZ(Math.PI / 2);
    //   carModel.traverse((child: unknown) => {
    //     if (child instanceof THREE.Mesh) {
    //       let material = new THREE.MeshPhongMaterial({
    //         map: picture,
    //         specularMap: bumpPic,
    //         specular: 0xffffff,
    //         shininess: 100,
    //         side: THREE.DoubleSide,
    //       });
    //       child.material = material;
    //     }
    //   });
    //   scene.add(carModel);
    //   let axisHeler = new THREE.AxesHelper();
    //   scene.add(axisHeler);
    //   /**
    //    * 光源设置
    //    */
    //   //点光源
    //   let point = new THREE.PointLight(0xffffff);
    //   point.position.set(10, 50, 100); //点光源位置
    //   scene.add(point); //点光源添加到场景中
    //   //   环境光
    //   let ambient = new THREE.AmbientLight(0xffffff);
    //   scene.add(ambient);
    //   /**
    //    * 相机设置
    //    */
    //   let width = window.innerWidth; //窗口宽度
    //   let height = window.innerHeight; //窗口高度
    //   let k = width / height; //窗口宽高比
    //   let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //   //创建相机对象
    //   let camera = new THREE.PerspectiveCamera(60, k, 1, 1000);
    //   camera.position.set(0, 0, 800); //设置相机位置
    //   camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    //   /**
    //    * 创建渲染器对象
    //    */
    //   let renderer = new THREE.WebGLRenderer();
    //   renderer.setSize(width, height - 91); //设置渲染区域尺寸
    //   renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    //   containerRef.value.appendChild(renderer.domElement); //body元素中插入canvas对象
    //   //执行渲染操作   指定场景、相机作为参数

    //   function render() {
    //     renderer.render(scene, camera); //执行渲染操作
    //     // if (i < points.length - 1) {
    //     //   requestAnimationFrame(render);
    //     //   carModel.position.set(points[i].x, points[i].y, points[i].z);
    //     //   carModel.lookAt(points[i + 1].x, points[i + 1].y, points[i + 1].z);
    //     //   carModel.rotateZ(Math.PI / 2);
    //     //   i++;
    //     // }
    //   }
    //   render();
    //   let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
    //   controls.addEventListener("change", render); //监听鼠标、键盘事件

        var scene = new THREE.Scene();
        /**
         * 创建一个设置重复纹理的管道
         */
        var curve = new THREE.CatmullRomCurve3(
          [
            new THREE.Vector3(-80, -40, 0),
            new THREE.Vector3(-70, 40, 0),
            new THREE.Vector3(70, 40, 0),
            new THREE.Vector3(80, -40, 0),
          ],
          false /*是否闭合*/
        );
        // var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
        // var textureLoader = new THREE.TextureLoader();
        // var texture = textureLoader.load("run.jpg");
        // // 设置阵列模式为 RepeatWrapping
        // texture.wrapS = THREE.RepeatWrapping;
        // texture.wrapT = THREE.RepeatWrapping;
        // // 设置x方向的偏移(沿着管道路径方向)，y方向默认1
        // //等价texture.repeat= new THREE.Vector2(20,1)
        // texture.repeat.x = 20;
        // var tubeMaterial = new THREE.MeshPhongMaterial({
        //   map: texture,
        //   transparent: true,
        // });
        // var tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
        // scene.add(tube);
        /**
         * 创建一个半透明管道
         */
        var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false);
        var tubeMaterial2 = new THREE.MeshPhongMaterial({
          color: 0x4488ff,
          transparent: true,
          opacity: 0.3,
        });
        var tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2);
        scene.add(tube2);

        scene.add(new THREE.AxesHelper(300));

        //小人box
        //geometryP = new THREE.CircleGeometry( 5, 32 );
        let geometryP = new THREE.SphereGeometry(5, 16, 16);
        console.log("geometryP", geometryP);
        var materialP = new THREE.MeshBasicMaterial({
          color: 0xff0000,
          side: THREE.DoubleSide,
        });
        let circleP = new THREE.Mesh(geometryP, materialP);
        scene.add(circleP);
        geometryP.rotateY(Math.PI / 2);

        circleP.position.set(-80, -40, 0);
        console.log(circleP);

        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x888888);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 100; //三维场景缩放系数
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer({
          antialias: true,
        });
        renderer.setSize(width, height);
        // renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        var progress = 0;

        // 渲染函数
        function render() {
          renderer.render(scene, camera); //执行渲染操作
          requestAnimationFrame(render);
          // 使用加减法可以设置不同的运动方向
          // 设置纹理偏移
        //   texture.offset.x -= 0.06;

          if (progress > 1.0) {
            return; //停留在管道末端,否则会一直跑到起点 循环再跑
          }
          progress += 0.0009;
          if (curve) {
            let point = curve.getPoint(progress);
            if (point && point.x) {
              circleP.position.set(point.x, point.y, point.z);
            }
          }
        }
        render();
    };
    onMounted(() => {
      draw();
    });
    return { containerRef };
  },
});
</script>
